import { defineStore } from 'pinia'
import { i18n } from '@/locales/index'
import cookies from  'js-cookie'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'

nProgress.configure({
  showSpinner: false,
  trickleSpeed: 100,
  parent: '#loading-bar-wrapper'
 })

const setTheme = (theme: string) => {
  if (theme === 'dark-theme' ) {
    document.body.classList.remove('light-theme')
    document.body.classList.add('dark-theme')
  } else {
    document.body.classList.remove('dark-theme')
    document.body.classList.add('light-theme')
  }
}

export const useAppStore = defineStore('appStore', {
  state: () => {
    return {
      themeConfig: {
        theme: cookies.get('theme') && String(cookies.get('theme')) === 'dark-theme' ? 'dark-theme' : 'light-theme',
        profile_shape: 'circle-avatar',
        feature: true,
        gradient: {
          color1: '#00bfff',
          color2: '#0072ff',
          color3: '#002eff'
        },
        header_gradient: 'linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%)',
        // background: 'linear-gradient(130deg, #24c6dc, #5433ff 41.07%, #ff0099 76.05%)',
        // 这行代码定义了一个线性渐变背景，渐变的角度是130度，渐变的颜色从#24c6dc（一种蓝色）开始，到41.07%的位置变为#5433ff（一种紫色），最后在76.05%的位置变为#ff0099（一种粉色）。
        // '-webkit-background-clip': 'text',
        // -webkit-background-clip: text; 是一个CSS属性，它指定背景只应用于元素的文本上，而不是整个元素框。
        // '-webkit-text-fill-color': 'transparent',
        // -webkit-text-fill-color: transparent; 是一个CSS属性，它将文本颜色设置为透明，这样设置的线性渐变背景就可以透过文本显示出来。
        // '-webkit-box-decoration-break': 'clone',
        // -webkit-box-decoration-break: clone; 是一个CSS属性，用于在多行元素上复制背景和边框，这样每一行都可以有完整的背景和边框效果。
        // 'box-decoration-break': 'clone',
        // box-decoration-break: clone; 是与上面属性相同的效果，但是它是标准属性，而不是Webkit引擎特有的属性。这意味着它有更广泛的兼容性。
        // 综合这些样式，最终的效果是文本会显示为渐变色，而且这个渐变效果会应用到每一行文本上，即使文本换行也能保持渐变色的连续性。
        // 这种效果通常用于增强文本的视觉效果和吸引力。不过需要注意的是，这些属性中的 
        // -webkit- 前缀是为了兼容旧版本的Webkit浏览器（如旧版本的Chrome和Safari），在现代浏览器中，可能只需要使用 background-clip 和 text-fill-color（不过，text-fill-color 不是标准属性，可能需要使用前缀或不同的方法来实现相似效果）。
        background_gradient_style: {
          background:'linear-gradient(to right, #00bfff, #0072ff, #002eff)',
          'webkit-background-clip': 'text',
          'webkit-text-fill-color': 'transparent',
          'webkit-box-decoration-break': 'clone',
          'box-decoration=break': 'clone'
        }
      },
      appLoading: false,
      websiteConfig: '' as any,
      viewCount: 0,
      articleCount: 0,
      talkCount: 0,
      categoryCount: 0,
      tagCount: 0,
      NPTimeout: -1 as NodeJS.Timeout | number,
      loadingTimeout: -1 as NodeJS.Timeout | number,
      aurora_bot_enable: true
    }
  },
  actions: {
    setLocale(locale: string) {
      cookies.set('locale', locale, {expires: 14})
      i18n.global.locale = locale
    },
    initializeTheme(mode: string) {
      setTheme(mode)
    },
    toggleTheme(isDark: boolean) {
      this.themeConfig.theme = isDark ? 'dark-theme' : 'light-theme'
      cookies.set('theme', this.themeConfig.theme, {expires: 14})
      setTheme(this.themeConfig.theme)
    },
    startLoading() {
      if (this.appLoading) return
      if (this.loadingTimeout !== -1) clearTimeout(this.loadingTimeout)
      if (this.NPTimeout !== -1) clearTimeout(this.NPTimeout)
      nProgress.start()
      this.appLoading = true
    },
    endLoading() {
      this.NPTimeout = setTimeout(() => {
        nProgress.done()
      }, 100)
      this.loadingTimeout = setTimeout(() => {
        this.appLoading = false
      }, 100)
    }
  },
})